import { t } from 'i18next'
import React, { useRef, useMemo } from 'react'
import { detailUrlParam } from '../interface'
import UseTemplateService from '../service'
import { Wrap, BodyWrap, FootWrap, LineWrap, PersonWrap, RegWrap } from './style'
import { Trigger, Modal } from '@kedacom/react-next'
import PopupUserWin from '@/pages/index/ManageList/MeetingCard/PopupUserWin'
import { Avatar } from '@/components/Avatar'
import { useSize } from 'ahooks'
import Docs, { DocsRef } from '@/pages/meetingList/MeetingCard/components/docs'
import Room from './room'
import { useGlobalStore } from '@/store/global'
/** tu */
const avatar = {
	width: 85,
	height: 55,
}
const Detail = (props: { data: detailUrlParam }) => {
	const fileManageRef = useRef<DocsRef | null>(null)
	const SWITCH = useGlobalStore((state) => state.SWITCH)
	const { meeting, page, initCopy, edit, openFileManage, isShowAllOrStowBtn, showOrHide, closeFileManage } =
		UseTemplateService(props.data)
	const {
		isRepeat,
		isAudit,
		title,
		time,
		vrm,
		regular,
		room,
		organizer,
		chairman,
		e164,
		password,
		live,
		brief,
		file,
		person,
		meeting_moid,
	} = page
	const attendingPersonsList = useRef(null)
	const liveRef = useRef(null)
	const attendingPersonsListSize = useSize(attendingPersonsList)
	const notAttendingPersonsList = useRef(null)
	const notAttendingPersonsListSize = useSize(notAttendingPersonsList)
	const isShow = useMemo(() => {
		return isShowAllOrStowBtn(avatar, attendingPersonsListSize, notAttendingPersonsListSize)
	}, [attendingPersonsListSize, notAttendingPersonsListSize])
	return (
		<>
			<Wrap>
				<BodyWrap>
					<div className="meeting_detail_main">
						<div className="title">
							<span title={title.name} className="text">
								{title.name}
							</span>
							{title.isEdit ? <span title={t('编辑')} className="lr edit" onClick={edit}></span> : ''}
						</div>
					</div>
					<div className="info">
						{time.isShow && (
							<LineWrap>
								<label title={t('时间')} className="datetime-label"></label>
								<div className="datetime">{time.dateTime}</div>
							</LineWrap>
						)}
						{vrm && (
							<LineWrap>
								<label title={t('虚拟会议室')} className="VMRName-label"></label>
								<div className="VMRName">{vrm}</div>
							</LineWrap>
						)}
						{regular.isShow && (
							<LineWrap>
								<label title={t('重复会议')} className="regular-datetime-label"></label>
								<div className="datetime">
									<span>{regular.text}</span>
									{regular.showLink && (
										<a
											className="regular-link"
											target="_blank"
											href={regular.link}
											rel="noreferrer"
										>
											{t('查看例会详情')}
										</a>
									)}
								</div>
							</LineWrap>
						)}
						{room.isShow && (
							<LineWrap className="group">
								<label title={t('会议室')} className="rooms-label"></label>
								<div className="rooms">
									{room.showName && <span>{room.name}</span>}
									{room.showDetail && meeting && (
										<Trigger
											popup={<Room isRepeat={isRepeat} rooms={meeting.rooms}></Room>}
											popupAlign={{ offset: [160, 0] }}
										>
											<span className="room-info-btn">{t('会议室详情')}</span>
										</Trigger>
									)}
								</div>
							</LineWrap>
						)}
						<div id="room-list" className="table-wrap">
							<table className="content">
								<tbody></tbody>
							</table>
						</div>
						<LineWrap>
							<label title={t('发起人')} className="organizer-label"></label>
							<div className="organizer">{organizer}</div>
						</LineWrap>
						{chairman && (
							<LineWrap title={t('管理方')}>
								<label className="manager-label"></label>
								<div className="manager">{chairman}</div>
							</LineWrap>
						)}
						{e164 && (
							<LineWrap title={t('会议号码')}>
								<label className="shortNO-label"></label>
								<div className="shortNO">{e164}</div>
							</LineWrap>
						)}
						{password && (
							<LineWrap title={t('会议密码')}>
								<label className="password-label"></label>
								<div className="password">{password}</div>
							</LineWrap>
						)}
						{live.liveShow && (
							<LineWrap title={t('会议直播')}>
								<label className="meetingLive-label"></label>
								<div className="meetingLive" title={live.liveUrl} ref={liveRef}>
									{live.liveUrl}
								</div>
								<span
									className="copyBtn"
									title={t('复制链接地址')}
									onClick={() => initCopy(live.liveUrl, liveRef.current)}
								></span>
								{live.livePasswordShow && (
									<div className="livePassword-wrap">
										<span>{t('直播密码 ')}</span>
										<span className="livePassword">{live.livePassword}</span>
									</div>
								)}
								{live.qrCodeBase64Show && (
									<div className="qrCodeBase64-wrap">
										<img className="qrCodeBase64-img" src={live.qrCodeBase64} alt={t('二维码')} />
										<div className="qrCodeBase64-tip">{t('扫码观看直播')}</div>
									</div>
								)}
							</LineWrap>
						)}
						{brief && (
							<LineWrap title={t('会议概要')} style={{ margin: '12px 0' }}>
								<label className="brief-label"></label>
								<div
									className="brief en-break-all"
									dangerouslySetInnerHTML={{
										__html: brief,
									}}
								></div>
							</LineWrap>
						)}
						{!!SWITCH.fileManager && !!SWITCH.meetingSpace && (
							<LineWrap className="file">
								<label className="file-label"></label>
								{file.show && (
									<span className="fileupload">
										{file.text ? (
											file.text
										) : (
											<span>{t('已上传{{fileNum}}个文档', { fileNum: file.num ?? 0 })}</span>
										)}
									</span>
								)}
								{file.btnShow && (
									<span className="fileBtn" title={t('文件管理')} onClick={openFileManage}></span>
								)}
							</LineWrap>
						)}
						{person.notParticipateInPersons.length > 0 && (
							<PersonWrap>
								<div className="notParticipateInPersons">
									<span>
										{t('{{num}}位不参加', { num: person.notParticipateInAllPersons.length })}
									</span>
									{isShow.isShowNotParticipateInAllPersons && (
										<span className="mt-all">
											{person.showNotParticipateInAllPersonsMtAll && (
												<span
													onClick={() => {
														showOrHide(2)
													}}
												>
													{t('显示全部')}
												</span>
											)}
											{!person.showNotParticipateInAllPersonsMtAll && (
												<span
													onClick={() => {
														showOrHide(2)
													}}
												>
													{t('收起')}
												</span>
											)}
										</span>
									)}
								</div>
								<div
									className={`list ${person.showNotParticipateInAllPersonsMtAll ? '' : 'auto'}`}
									ref={notAttendingPersonsList}
								>
									{(person.showNotParticipateInAllPersonsMtAll
										? [...person.notParticipateInPersons]
										: [...person.notParticipateInAllPersons]
									).map((mt, index) => {
										let user = {
											portrait: mt.portrait,
											accountType: mt.account_type,
										}
										return mt.account.length > 0 && !!SWITCH.userPopUp ? (
											<Trigger
												key={index}
												trigger="hover"
												popup={<PopupUserWin moid={mt.account} key={index}></PopupUserWin>}
												popupAlign={{
													points:
														index % isShow.rowCount > isShow.rowCount / 2
															? ['tr', 'br']
															: ['tl', 'bl'],
													offset:
														index % isShow.rowCount > isShow.rowCount / 2
															? [-10, 0]
															: [10, 0],
												}}
											>
												<div className="mt-each" key={index}>
													<div className="mt-each-header">
														<Avatar value={user}></Avatar>
													</div>
													<div className="mt-each-name" title={mt.name}>
														{mt.name}
													</div>
												</div>
											</Trigger>
										) : (
											<div className="mt-each" key={index}>
												<div className="mt-each-header">
													<Avatar value={user}></Avatar>
												</div>
												<div className="mt-each-name" title={mt.name}>
													{mt.name}
												</div>
											</div>
										)
									})}
								</div>
							</PersonWrap>
						)}
						{person.attendingPersons.length > 0 && (
							<PersonWrap>
								<div className="attendingPersons">
									<span>{t('{{num}}位参加', { num: person.attendingAllPersons.length })}</span>
									{isShow.isShowAllAttendingPersons && (
										<span className="mt-all">
											{person.showAttendingPersonsMtAll && (
												<span onClick={() => showOrHide(1)}>{t('显示全部')}</span>
											)}
											{!person.showAttendingPersonsMtAll && (
												<span onClick={() => showOrHide(1)}>{t('收起')}</span>
											)}
										</span>
									)}
								</div>
								<div
									className={`list ${person.showAttendingPersonsMtAll ? '' : 'auto'}`}
									ref={attendingPersonsList}
								>
									{(person.showAttendingPersonsMtAll
										? [...person.attendingPersons]
										: [...person.attendingAllPersons]
									).map((mt, index) => {
										let user = {
											portrait: mt.portrait,
											accountType: mt.account_type,
										}
										return mt.account.length > 0 && !!SWITCH.userPopUp ? (
											<Trigger
												key={index}
												trigger="hover"
												popupAlign={{
													points:
														index % isShow.rowCount > isShow.rowCount / 2
															? ['tr', 'br']
															: ['tl', 'bl'],
													offset:
														index % isShow.rowCount > isShow.rowCount / 2
															? [-10, 0]
															: [10, 0],
												}}
												popup={<PopupUserWin moid={mt.account} key={index}></PopupUserWin>}
											>
												<div className="mt-each" key={index}>
													<div>
														<Avatar value={user}></Avatar>
													</div>
													<div className="mt-each-name" title={mt.name}>
														{mt.name}
													</div>
												</div>
											</Trigger>
										) : (
											<div className="mt-each" key={index}>
												<div>
													<Avatar value={user}></Avatar>
												</div>
												<div className="mt-each-name" title={mt.name}>
													{mt.name}
												</div>
											</div>
										)
									})}
								</div>
							</PersonWrap>
						)}
					</div>
				</BodyWrap>
				<FootWrap></FootWrap>
				<Modal
					title={t('会议文档')}
					open={file.showFileManager}
					width={848}
					height={508}
					okText={false}
					cancelText={false}
					footer={<></>}
					onCancel={() => {
						let number = fileManageRef.current?.getFileNumber() ?? 0
						closeFileManage(number)
					}}
				>
					<Docs
						ref={fileManageRef}
						meetingInfo={{
							meetingMoid: meeting_moid,
							name: title.name,
							e164: e164,
							dateTime: time.dateTime,
							isAudit: isAudit,
						}}
					/>
				</Modal>
			</Wrap>
			{false && (
				<RegWrap>
					<div className="participateTypeDialog">
						<div className="detailParticipateType"></div>
					</div>
					<div className="rejectDialog">
						<div className="dialog-content"></div>
						<div className="opt-btn"></div>
					</div>
				</RegWrap>
			)}
		</>
	)
}
export default Detail
